<template>
  <div class="cart-item">
    <!-- 商品选择框 -->
    <div class="item-checkbox">
      <el-checkbox 
        :model-value="item.checked" 
        @change="(val: boolean) => $emit('check-change', item.id, val)"
        class="item-select"
      />
    </div>
    
    <!-- 商品图片 -->
    <div class="item-image">
      <img 
        :src="item.image" 
        :alt="item.title" 
        class="product-img" 
        @click="navigateToProductDetail"
        style="cursor: pointer;"
      />
      <div v-if="item.isKill" class="kill-badge">秒杀</div>
    </div>
    
    <!-- 商品信息 -->
    <div class="item-info">
      <!-- 商品标题 -->
      <div 
        class="item-title"
        @click="navigateToProductDetail"
        style="cursor: pointer;"
      >
        {{ item.title }}
      </div>
      
      <!-- 商品规格 -->
      <div class="item-specs">
        <template v-if="Object.keys(getSpecsObject(item.spec)).length > 0">
          <span class="spec-item" v-for="(spec, key) in getSpecsObject(item.spec)" :key="key">
            {{ key }}：<span class="spec-value">{{ spec }}</span>
          </span>
        </template>
        <template v-else>
          <span class="spec-empty">无规格</span>
        </template>
      </div>
      
      <!-- 服务标签 -->
      <div class="service-tags">
        <!-- 退货政策 -->
        <div class="service-tag return-policy" v-if="item.returnPolicy">
          <span class="tag-text">{{ item.returnPolicy }}</span>
        </div>
        
        <!-- 优惠信息 -->
        <!-- <div class="service-tag discount-info" v-if="item.discountInfo">
          <span class="tag-text">{{ item.discountInfo }}</span>
        </div> -->
        
        <!-- 支付信息 -->
        <!-- <div class="service-tag payment-info" v-if="item.paymentInfo">
          <span class="tag-text">{{ item.paymentInfo }}</span>
        </div> -->
      </div>
    </div>
    
    <!-- 价格区域 -->
    <div class="item-price">
      <div class="unit-price">单价：¥{{ item.price.toFixed(2) }}</div>
      <div v-if="item.originalPrice" class="original-price">原价：¥{{ item.originalPrice.toFixed(2) }}</div>
      <div class="current-price">¥<span class="price-value">{{ totalPrice.toFixed(2) }}</span></div>
    </div>
    
    <!-- 数量控制 -->
    <div class="item-quantity">
      <div class="quantity-control">
        <button 
          class="qty-btn minus" 
          @click="decreaseQuantity"
          :disabled="item.num <= 1"
        ></button>
        <input 
          type="text" 
          class="qty-input" 
          :value="item.num" 
          @input="onQuantityInput"
          @blur="onQuantityBlur"
        />
        <button 
          class="qty-btn plus" 
          @click="increaseQuantity"
          :disabled="item.num >= 99"
        ></button>
      </div>
    </div>
    
    <!-- 小计 -->
    <!-- <div class="item-subtotal">
      <div class="subtotal-price">¥{{ (item.price * item.quantity).toFixed(2) }}</div>
    </div> -->
    
    <!-- 操作按钮 -->
    <div class="item-actions">
      <button class="action-link move-favorite" @click="$emit('move-favorite', item.id)">
        收藏
      </button>
      <button class="action-link delete" @click="$emit('delete', item.id)">
        删除
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '../../router/index.ts'
import { computed } from 'vue'

export interface CartItemData {
  id: string
  itemId: string
  title: string
  image: string
  price: number
  originalPrice?: number
  isKill?: boolean
  num: number
  checked: boolean
  returnPolicy?: string
  spec: string | Record<string, string>
  discountInfo?: string
  paymentInfo?: string
}

const props = defineProps<{
  item: CartItemData
}>()

const emits = defineEmits<{
  (e: 'check-change', id: string, checked: boolean): void
  (e: 'quantity-change', id: string, num: number): void
  (e: 'move-favorite', id: string): void
  (e: 'delete', id: string): void
}>()

// 计算总价（单价 × 数量）
const totalPrice = computed(() => {
  return props.item.price * props.item.num
})

const decreaseQuantity = () => {
  if (props.item.num > 1) {
    emits('quantity-change', props.item.id, props.item.num - 1)
  }
}

const increaseQuantity = () => {
  if (props.item.num < 99) {
    emits('quantity-change', props.item.id, props.item.num + 1)
  }
}

const onQuantityInput = (event: Event) => {
  const target = event.target as HTMLInputElement
  const value = parseInt(target.value)
  if (!isNaN(value) && value >= 1 && value <= 99) {
    emits('quantity-change', props.item.id, value)
  }
}

const onQuantityBlur = (event: Event) => {
  const target = event.target as HTMLInputElement
  const value = parseInt(target.value)
  if (isNaN(value) || value < 1) {
    emits('quantity-change', props.item.id, 1)
  } else if (value > 99) {
    emits('quantity-change', props.item.id, 99)
  }
}

// 将specs转换为对象
const getSpecsObject = (spec: string | Record<string, string>): Record<string, string> => {
  if (typeof spec === 'string') {
    try {
      // 尝试解析JSON字符串
      return JSON.parse(spec)
    } catch (error) {
      console.error('解析specs失败:', error)
      // 如果解析失败，返回空对象
      return {}
    }
  }
  // 如果已经是对象，直接返回
  return spec
}

// 跳转到商品详情页
const navigateToProductDetail = () => {
  router.push({
    path: `/product/${props.item.itemId}`
  })
}

</script>

<style scoped lang="scss">
.cart-item {
  display: grid;
  grid-template-columns: 1.75rem 6.5rem 1fr 6rem 6rem 6rem 5.5rem; // 缩小整体
  gap: 0.375rem;
  align-items: center;
  padding: 0.75rem 0.5rem; // 更紧凑
  border-bottom: 1px solid #f0f0f0;
  background: transparent;
}

.item-checkbox {
  display: flex;
  justify-content: center;
  
  .item-select {
          :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
        background-color: #ff6a00; // 改为 #ff6a00
        border-color: #ff6a00;
      }
  }
}

.item-image {
  padding: 0 0.5rem;
  width: 5.5rem;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  
  .product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border: 1px solid #f0f0f0;
    transition: transform 0.2s ease;
    
    &:hover {
      transform: scale(1.03);
    }
  }
  
  .kill-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: #ff4d4f;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    z-index: 1;
  }
}

.item-info {
  padding-right: 1rem;
  
  .item-title {
    font-size: 0.7875rem; // 略小
    color: #333;
    line-height: 1.4;
    margin-bottom: 0.375rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.3s ease;
    line-clamp: 2; // 兼容标准属性
    
    &:hover {
      color: #ff6a00; // 改为 #ff6a00
      transform: translateX(2px);
    }
  }
  
  .item-specs {
    margin-bottom: 0.5rem;
    min-height: 1.5rem;
    
    .spec-item {
      display: block;
      font-size: 0.75rem;
      color: #999;
      margin-bottom: 0.25rem;
      
      .spec-value {
        color: #666;
      }
    }
    
    .spec-empty {
      display: block;
      font-size: 0.75rem;
      color: #ccc;
      font-style: italic;
    }
  }
  
  .service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
    
    .service-tag {
      display: inline-flex;
      align-items: center;
      height: 1rem;
      padding: 0 0.25rem;
      border-radius: 0.25rem;
      font-size: 0.675rem;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-1px);
      }
      
      .tag-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 10rem;
      }
      
      &.return-policy {
        background-color: #fff8f0;
        color: #ff6a00; // 改为 #ff6a00
      }
      
      &.discount-info {
        background-color: #fff8f0;
        color: #ff6a00; // 改为 #ff6a00
      }
      
      &.payment-info {
        background-color: #f5f5f5;
        color: #666;
      }
    }
  }
}

.item-price {
  text-align: center;
  
  .unit-price {
    font-size: 0.7rem;
    color: #999;
    margin-bottom: 0.25rem;
  }
  
  .current-price {
    font-size: 0.8125rem;
    color: #ff6a00; // 改为 #ff6a00
    font-weight: 400;
    
    .price-value {
      font-size: 0.9375rem;
      font-weight: 600;
    }
  }
  
  .original-price {
    font-size: 0.7rem;
    color: #999;
    text-decoration: line-through;
    margin-top: 0.25rem;
  }
  
  .price-label {
    display: inline-block;
    font-size: 0.7rem;
    color: #ff6a00; // 改为 #ff6a00
    border: 1px solid #ff6a00;
    padding: 0 0.25rem;
    margin-top: 0.25rem;
    border-radius: 2px;
    transition: all 0.3s ease;
    
    &:hover {
      background-color: rgba(217, 72, 37, 0.1);
      transform: scale(1.05);
    }
  }
}

.item-quantity {
  display: flex;
  justify-content: center;
  
  .quantity-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    
    .qty-btn {
      width: 1.5rem;
      height: 1.5rem;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 0.875rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      
      &.minus {
        background: white;
        border: 1px solid #1890ff;
        color: #1890ff;
        
        &:hover:not(:disabled) {
          background: #f0f8ff;
          transform: scale(1.05);
        }
        
        &:disabled {
          border-color: #d9d9d9;
          color: #d9d9d9;
          cursor: not-allowed;
        }
        
        &::before {
          content: '';
          width: 0.75rem;
          height: 1px;
          background: currentColor;
          position: absolute;
        }
      }
      
      &.plus {
        background: #1890ff;
        color: white;
        
        &:hover:not(:disabled) {
          background: #40a9ff;
          transform: scale(1.05);
        }
        
        &:disabled {
          background: #d9d9d9;
          cursor: not-allowed;
        }
        
        &::before {
          content: '';
          width: 0.75rem;
          height: 1px;
          background: currentColor;
          position: absolute;
        }
        
        &::after {
          content: '';
          width: 1px;
          height: 0.75rem;
          background: currentColor;
          position: absolute;
        }
      }
    }
    
    .qty-input {
      width: 2.5rem;
      height: 1.5rem;
      text-align: center;
      border: 1px solid #e0e0e0;
      border-radius: 0.25rem;
      outline: none;
      font-size: 0.875rem;
      color: #333;
      background: white;
      
      &:focus {
        border-color: #1890ff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
      }
    }
  }
}

.item-subtotal {
  text-align: center;
  
  .subtotal-price {
    font-size: 0.9375rem;
    color: #ff6a00; // 改为 #ff6a00
    font-weight: 600;
  }
}

.item-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  
  .action-link {
    background: none;
    border: none;
    font-size: 0.7rem;
    color: #666;
    cursor: pointer;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;

    &:hover {
      border-color: #ff6a00;
      color: #ff6a00;
      background: #fff8f0;
      transform: translateY(-1px);
    }

    &.delete {
      border-color: #ffe0cc;
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .cart-item {
    grid-template-columns: 2rem 5rem 1fr;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    
    .item-image {
      padding: 0;
      
      .product-img {
        width: 4.5rem;
        height: 4.5rem;
      }
    }
    
    .item-price,
    .item-quantity,
    .item-subtotal,
    .item-actions {
      grid-column: 3;
      text-align: left;
      justify-content: flex-start;
      padding: 0.25rem 0;
    }
    
    .item-actions {
      flex-direction: row;
      gap: 1rem;
    }
  }
}
</style>

